<template>
    <div class="teaching-look w-100">
        <el-card class="box-card-table h-100" shadow="never">
            <div slot="header" class="clearfix">
                <span class="fl">查看教学计划</span>
                <el-button class="fr" @click="goback" style="padding:6px;">返回</el-button>
            </div>
            <div class="h-100">
                <div>
                    <h3 class="t-c" style="font-size:20px;height:50px;line-height:50px; ">
                        {{ruleForm.PlanName | getPlanName}}
                    </h3>
                    <div class="clearfix" style="height:30px;line-height:30px; ">
                        <div class="fl" style="margin-right:10px;">
                            <span>老师：</span>
                            <span>{{ruleForm.bSID | getStudyName(studyList)}}</span>
                        </div>
                        <div class="fl" style="margin-right:10px;">
                            <span>学生：</span>
                            <span>{{ruleForm.bTID | getTeacherName(teacherList)}}</span>
                        </div>
                    </div>
                    
                </div>
                <table class="w-100 plan-list">
                    <tr>
                        <th></th>
                        <th>教学要求</th>
                        <th>重点、难点</th>
                        <th style="width:50px;"></th>
                        <th class="week">周次</th>
                        <th style="width:220px;">课题（篇目）</th>
                    </tr>
                    <tr>
                        <td :rowspan="rowvalue">知识</td>
                        <td :rowspan="rowvalue">
                            <div v-html="ruleForm.bJXYQ">

                            </div>
                        </td>
                        <td :rowspan="rowvalue">
                            <div v-html="ruleForm.bZDND">
                            </div>
                        </td>
                        <td :rowspan="rowvalue">
                            <div>教<br>学<br>进<br>度</div>
                        </td>
                        <td class="no-border"></td>
                        <td class="no-border"></td>
                    </tr>
                    <tr v-for="(item,index) in week" :key="item.times">
                        <td  class="week">
                            第{{index +1}}周
                        </td>
                        <td>
                            <span>{{item.plan}}</span>
                        </td>
                    </tr>
                </table>
            </div>
        </el-card>
    </div>
</template>

<script>
import elewarp from '@/components/warp-slot.vue'
import {addPlanList,editPlanList,lookPlanList} from '@/api/index.js'

export default {
    name: 'teaching',
    components: {
        elewarp,
        // eleAddStudy
    },
    data() {
        return {
            ruleForm:{
                PlanName:'',
                bJXYQ:'',
                bZDND:'',
                bSID:'',
                bTID:''
            },
            week:[]
        }
    },
    filters:{
        getStudyName(val,data) {
            for (let i = 0; i < data.length; i++) {
                if(val == data[i].SID){
                    return data[i].SName;
                }
            }
            return '未知'
        },
        getTeacherName(val,data) {
            for (let i = 0; i < data.length; i++) {
                if(val == data[i].TID){
                    return data[i].T_Name;
                }
            }
            return '未知'
        },
        getPlanName(val){
            let res = val.split('@');
            return `${res[0]}学年第${res[1] || ''}学期${res[2] || ''}教学计划`;
        }
    },
    computed:{
        rowvalue(){
            return this.week.length + 2
        },
        teacherList() {
            return this.$store.state.allTeacherList;
        },
        studyList() {
            return this.$store.state.allStudyList;
        }
    },
    created() {
        this.syudyid = this.$route.query.id;
        if(this.syudyid) {
            this._getStudyInfo();
        } else {
            for (let i = 0; i < 21; i++) {
                this.week.push({plan:'',week:i + 1,id:0})
            }
        }
    },
    methods:{
        _getStudyInfo(){
            lookPlanList({bTPID:this.syudyid}).then((res) => {
                if(res) {
                    this.ruleForm.PlanName = res.PlanName;
                    this.ruleForm.bJXYQ = res.JXYQ;
                    this.ruleForm.bZDND = res.ZDND;
                    this.ruleForm.bSID = res.SID;
                    this.ruleForm.bTID = res.TID;
                    // 教学计划
                    let arr = res.bTS_Tisme.split('|');
                    for (let i = 0; i < arr.length; i++) {
                        const item = arr[i].split('#@');
                        this.week.push({plan:item[1],week:item[2],id:item[0]})
                    }
                }
            })
        },
        // 全选
        goback(){
            this.$router.push({path:'/teaching/teaching-list'})
        },
    }
}
</script>
<style lang="less">
.teaching-look{
    min-height: 100%;
}
.plan-list{
    th{
        background-color: #F5F7FA;
        line-height: 40px;
    }
    th,td{
        border:1px solid #ccc;
    }
    td .el-form-item{
        margin-bottom: 0px;
    }
    .week{
        width: 100px;
        .el-icon-close:hover{
            color:red;
        }
    }
    .no-border{
        border-bottom: 0px;
    }
    .btn-tr{
        td{
            border-top:0px;
        }
    }
    .ql-editor{
        min-height: 400px !important;
    }
}
.teaching{
    .el-card__body{
        // height:calc(100% - 70px);
    }
    .box-card-table{
        overflow-y: auto;
        box-sizing: border-box;
    }
}
</style>
